import "./index.css"
import { Upload, message, Button,Input } from 'antd';
import { InboxOutlined } from '@ant-design/icons';

const { Dragger } = Upload;

const Poster = () => {
    const props = {
        name: 'file',
        multiple: true,
        action: 'https://creationapi.shbwyz.com/api/file/upload?unique=0',
        onChange(info: { file: { name?: any; status?: any; }; fileList: any; }) {
            const { status } = info.file;
            if (status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (status === 'done') {
                message.success(`${info.file.name} file uploaded successfully.`);
            } else if (status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
        onDrop(e: { dataTransfer: { files: any; }; }) {
            console.log('Dropped files', e.dataTransfer.files);
        },
    };
    return (
        //大盒子
        <div className="box">
            <div className="head">
                <span style={{ color: "#8C8C8C" }}>工作台&emsp;/&emsp;</span>
                海报管理
            </div><br />
            <div className="content">
                <Dragger {...props} style={{ backgroundColor: "#fff" }}>
                    <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                    </p>
                    <p className="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
                    <p className="ant-upload-hint" style={{ color: "#000", fontSize: "14.5px" }}>
                        文件将上传到OSS,如未配置请先配置
                    </p>
                </Dragger>
            </div>
            <div className="leg"><br />
                <div className="legone">
                    &emsp;<span>文件名称&nbsp;:</span>&emsp;
                    <Input placeholder="请输入文件名称" style={{width:"222px",height:"32px"}}/>
                </div>
                <div className="legtwo">
                    <div></div>
                    <div><Button type="primary" className="btns">搜 索</Button>
                    <Button className="btnc">重 置</Button></div>
                    
                </div>
            </div>
            
            <div className="foot">
                <br /><br /><br /><br />
                <div className="iconfont" style={{width:"100%",display:"flex",justifyContent:"center"}}>
                     <svg className="icon" viewBox="0 0 1548 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7279" width="200" height="200"><path d="M0 849.170732a774.243902 174.829268 0 1 0 1548.487805 0 774.243902 174.829268 0 1 0-1548.487805 0Z" fill="#F5F5F5" p-id="7280"></path><path d="M474.536585 324.682927a74.926829 74.926829 0 0 1 74.92683 74.926829v24.97561a49.95122 49.95122 0 0 0 49.951219 49.951219h349.658537a49.95122 49.95122 0 0 0 49.951219-49.951219v-24.97561a74.926829 74.926829 0 0 1 74.92683-74.926829h274.731707v474.536585a99.902439 99.902439 0 0 1-99.902439 99.902439H299.707317a99.902439 99.902439 0 0 1-99.902439-99.902439V324.682927h274.731707z" fill="#FAFAFA" p-id="7281"></path><path d="M1048.97561 0l299.707317 324.682927v474.536585a99.902439 99.902439 0 0 1-99.902439 99.902439H299.707317a99.902439 99.902439 0 0 1-99.902439-99.902439V324.682927L474.536585 0h574.439025z m274.731707 349.658537H1073.95122a49.95122 49.95122 0 0 0-49.826342 46.204878L1024 399.609756v25.899707l-0.199805 4.645464a74.926829 74.926829 0 0 1-70.381268 69.23239L949.073171 499.512195H598.490537l-4.645464-0.199805a74.926829 74.926829 0 0 1-69.23239-70.381268L524.487805 424.585366v-24.97561a49.95122 49.95122 0 0 0-46.204878-49.826341L474.536585 349.658537H224.780488v449.560975a74.926829 74.926829 0 0 0 70.531122 74.801951L299.707317 874.146341h949.073171a74.926829 74.926829 0 0 0 74.801951-70.531121L1323.707317 799.219512V349.658537zM1038.036293 24.97561H486.100293L232.472976 324.682927H474.536585a74.926829 74.926829 0 0 1 74.92683 74.926829v24.97561a49.95122 49.95122 0 0 0 46.204878 49.826341L599.414634 474.536585h349.658537a49.95122 49.95122 0 0 0 49.826341-46.204878L999.02439 424.585366v-24.97561a74.926829 74.926829 0 0 1 74.92683-74.926829h240.764878L1038.036293 24.97561z" fill="#D9D9D9" p-id="7282"></path></svg>
                </div>
                <div className="data" style={{width:"100%",display:"flex",justifyContent:"center",color:"#BFBFBF"}}>
                    <span>暂无数据</span>
                </div>
            </div>
        </div>
    )
}
export default Poster